<template>
  <div v-loading="loading" class="app-container">
    <x-table v-model="searchData" :config="tableConfig" :data="tableData" :page="page" :load="getCouponByPage" />
    <couponForm v-if="dialogName == 'couponForm'" :id="propId" @refresh="getCouponByPage" :mode="mode"
      @close="closeDialog"></couponForm>
  </div>
</template>
  
<script>
import { getCouponByPage, delCouponById } from '@/api/coupon'
import { getToken } from '@/utils/auth'
import couponForm from './form.vue'
import { importDic } from '@/utils'
import { formateDate } from "@/utils/index"

export default {
  components: {
    couponForm
  },
  data() {
    return {
      eSDic: 'findCouponStatus',
      loading: 0,
      tableData: [],
      page: {
        pageSizes: [10, 20],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      searchData: {
        status: 88
      },
      propId: '',
      dialogName: ''
    }
  },

  computed: {
    tableConfig() {
      const _this = this
      return {
        search: true,
        reset: true,
        stripe: false,
        bcoupon: true,
        highlightCurrentRow: true,
        rowClick: node => _this.$emit('cellClick', node),
        btn: [
          { text: '新增', click: () => _this.operate('add'), icon: 'el-icon-circle-plus' }
        ],
        column: [
          { label: '优惠券名称', name: 'couponName', search: true, xType: 'input' },
          { label: '优惠券类型', name: 'couponType', search: true, xType: 'select', dic: importDic('couponType') },
          { label: '优惠券描述', name: 'details', search: false, xType: 'input' },
          { label: '活动开始时间', name: 'couponStartTime', search: false, xType: 'dateTimePicker' },
          { label: '活动结束时间', name: 'couponEndTime', search: false, xType: 'dateTimePicker' },
          { xType: 'select', name: 'couponStatus', label: '活动状态', dic: importDic('couponStatus')},

        ],
        operate: [
          { text: '编辑', show: true, click: data => this.operate('edit', data) },
          { text: '查看', show: true, click: data => this.operate('detail', data) },
          { text: '删除', show: true, click: _this.del },
        ]
      }
    }
  },

  mounted() {
    this.getCouponByPage()
  },

  methods: {
    getCouponByPage() {
      this.loading++
      getCouponByPage(this.searchData, this.page.pageNum, this.page.pageSize, getToken()).then(res => {
        console.log("getCouponByPage" + res)
        this.tableData = res.result.records
        for (var i = 0; i <  res.result.records.length; i++) {
          this.tableData[i].couponStartTime = new Date(this.tableData[i].couponStartTime)
          this.tableData[i].couponStartTime = formateDate(this.tableData[i].couponStartTime)
          this.tableData[i].couponEndTime = new Date(this.tableData[i].couponEndTime)
          this.tableData[i].couponEndTime = formateDate(this.tableData[i].couponEndTime)
        }
        this.page.total = res.result.total
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },
    operate(mode, data) {
      if (mode !== 'add') {
        this.propId = data.id
        this.eSDic = 'couponStatus'
      }
      this.mode = mode
      this.dialogName = 'couponForm'
    },
    del(data) {
      this.delConfirm().then(() => {
        this.loading++
        delCouponById(data.id, getToken()).then(res => {
          console.log(data.id + 'delCouponById' + res)
          this.$message.success(res.message)
          this.getCouponByPage()
        }).catch(e => console.log(e)).finally(() => this.loading--)
      }).catch(e => console.log(e))
    },
    closeDialog() {
      this.dialogName = ''
    }
  },

}
</script>
  